<div class="wrapper clearfix">
    <div class="logo" id="logo"><img src="/images/logo.png" alt=""></div>
    <% if(login_btn_show=='0'){%>
    <div class="login-box">
        <a href="javascript:;" id="register-btn">Register</a>
        <a href="javascript:;" id="login-btn">Login</a>
    </div>
    <%}else{%>
    <!-- 登陆成功后显示个人信息如下 -->
    <div class="personal-box">
        <div class="avatar"></div>
        <ul class="userinfo">
            <li>User: <span><%= email %></span></li>
            <li><a data-toggle="modal" id="change-btn">ChangePassword</a></li>
            <li style="border-top: 1px solid #ffff;"><a href="/order">The order list</a></li>
        </ul>
        <span class="glyphicon glyphicon-triangle-bottom dropIcon"></span>
        <span class="glyphicon glyphicon-log-out" id="logout"></span>
    </div>
    <%}%>
</div>

 <!-- 登录模态框 -->
 <div class="modal fade modalbox" id="loginModal" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">User login</h4>
        </div>
        <div class="modal-body">
            <form id="loginForm">
                <div class="form-group">
                    <label for="email">Email address</label>
                    <input type="text" class="form-control" name="email" id="email" placeholder="Email">
                    </div>
                    <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" name="password" id="password" placeholder="Password">
                </div>
                <button type="button" class="btn btn-primary" id="loginBtn">LOGIN</button>                

                <div class="forget-box">
                    <a href="javascript:;" id='forgetPwdModal-btn' class="forgetPwd">Forget password</a>
                    <span>|</span>
                    <a href="javascript:;" id='loginModal-btn' class="register">Register Now</a>
                </div>
            </form>
        </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
 <!-- 注册模态框 -->
 <div class="modal fade modalbox" id="regModal" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">User Register</h4>
        </div>
        <div class="modal-body">
            <form id="regForm">
                <div class="form-group">
                  <label for="regEmail">Email address</label>
                  <input type="text" class="form-control" id="regEmail" name="email" placeholder="Email">
                </div>
                <div class="form-group">
                  <label for="regPwd">Password</label>
                  <input type="password" class="form-control" id="regPwd" name="password" placeholder="Password">
                </div>
                <div class="form-group">
                    <label for="regPwd">Retype password</label>
                    <input type="password" class="form-control" id="confirmRegPwd" name="confirmPassword" placeholder="Retype password">
                  </div>
                <!-- 图像验证码 -->
                <div class="codebox clearfix">
                    <div class="form-group codeinput">
                        <label for="regGraphCode" style="display: block">Graph Code</label>
                      <input type="text" class="form-control" id="regGraphCode" name="graphCode" placeholder="Graph validate code">
                    </div>
                    <div class="imgCode">
                    </div>
                </div>
                <!-- 邮箱验证码 -->
                <div class="codebox clearfix">
                    <div class="form-group codeinput">
                    <label for="regEmailcode" style="display: block">Email Code</label>
                      <input type="text" class="form-control" id="regEmailcode" name="emailcode" placeholder="Email code">
                    </div>
                    <div class="emailCode sendCode" id="sendCode" onclick="sendemail('regEmail')">send</div>
                </div>
                <button type="button" class="btn btn-primary" id="regBtn">Sign Up</button>
            </form>
        </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
 <!-- 忘记密码模态框 -->
 <div class="modal fade modalbox" id="fgtModal" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Forget Password</h4>
        </div>
        <div class="modal-body">
            <form id="fgtForm">
                <div class="form-group">
                    <label for="fgtPwd">Password</label>
                    <input type="password" class="form-control" id="fgtPwd" name="fgtPassword" placeholder="Password">
                </div>
                <div class="form-group">
                    <label for="fgtRePwd">Re-password</label>
                    <input type="password" class="form-control" id="fgtRePwd" name="rePwd" placeholder="Re-password">
                </div>
                <div class="form-group">
                  <label for="fgtEmail">Email address</label>
                  <input type="text" class="form-control" id="fgtEmail" name="email" placeholder="Email">
                </div>
                 <!-- 邮箱验证码 -->
                 <div class="codebox clearfix">
                    <div class="form-group codeinput">
                    <label for="fgtEmailcode" style="display: block">Email Code</label>
                        <input type="text" class="form-control" id="fgtEmailcode" name="emailcode" placeholder="Email code">
                    </div>
                    <div class="emailCode sendCode" onclick="sendemail('fgtEmail')">send</div>
                </div>
                <button type="button" class="btn btn-primary" id="fgtBtn">Submit</button>
          </form>
        </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 更改密码模态框 -->
 <div class="modal fade modalbox" id="changeModal" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Change Password</h4>
        </div>
        <div class="modal-body">
            <form id="chgePwdForm">
                <div class="form-group">
                    <label for="chgEmail">Email address</label>
                    <input type="text" class="form-control" id="chgEmail" name="email" placeholder="Email">
                </div>
                <div class="form-group">
                    <label for="chgOldPwd">Old password</label>
                    <input type="password" class="form-control" id="chgOldPwd" name="chgPassword" placeholder="Old-password">
                </div>
                <div class="form-group">
                    <label for="chgNewPwd">New password</label>
                    <input type="password" class="form-control" id="chgNewPwd" name="chgNewPwd" placeholder="New-password">
                </div>
                <div class="form-group">
                    <label for="chgRePwd">Repeat password</label>
                    <input type="password" class="form-control" id="chgRePwd" name="chgRePwd" placeholder="Re-password">
                </div>
                
                <button type="button" class="btn btn-primary" id="changeBtn">Change</button>
            </form>
        </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
    var countdown=60; 
    var isClick=true;
    var isRecursion=true;
    function sendemail(id){
        // 如果邮箱未通过则弹框显示输入正确的邮箱
        var mailReg = /^([\w-.!#$%&'*-+=/?^_{|}~]+)@((?:\w+\.)+)(?:[a-zA-Z]{2,4})$/
        if(!mailReg.test($('#'+id).val())){
            toastr.error('Please enter a valid email address')
        }else{
            if(isClick){
                sendemailAjax($('#'+id).val());
            }
        }
    }
    
    function settime() { 
        if(countdown == 0) { 
            $(".sendCode").text('send');
            countdown = 60; 
            isClick=true;
            return
        } else { 
            isClick=false;
            $(".sendCode").text(countdown +'s');
            countdown--; 
        } 
        setTimeout(function(){
            if(isRecursion){
                console.log(1);
                settime();
            }
        },1000)
    }

    // 发送 邮箱验证码函数
    function sendemailAjax(mail){
        $(".sendCode").text('loading');
        isClick=false;
        $.ajax({   
            type:'post',
            data:{
                "mail":mail,
            },
            dataType:'json', 
            url: "/sendMail",
            success: function(data) { 
                if(data.status==1){
                    // 执行发送倒计时函数
                    isRecursion=true;
                    settime();
                }else{
                    isClick=true;
                    $(".sendCode").text('send');
                    toastr.error(data.errMsg);
                }
            },
            error:function(data){
                //提交失败
            }
        });
    }
    $(function(){
         //消息提示全局配置
        toastr.options = {
        "closeButton": true,//是否配置关闭按钮
        "debug": false,//是否开启debug模式
        "newestOnTop": false,//新消息是否排在最上层
        "progressBar": false,//是否显示进度条
        "positionClass": "toast-center-center",//消息框的显示位置
        "preventDuplicates": false,//是否阻止弹出多个消息框
        "onclick": null,//点击回调函数
        "showDuration": "300",
        "hideDuration": "1000",
        "timeOut": "1500",//1.5s后关闭消息框
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
        }

        //登录表单校验
        $("#loginForm").bootstrapValidator({
            enabled: true,
            // message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                //普通字段不为空校验
                email: {
                validators: {
                    notEmpty: {
                    message: 'The email address cannot be empty'
                    },
                    regexp: {
                    regexp: /^([\w-.!#$%&'*-+=/?^_{|}~]+)@((?:\w+\.)+)(?:[a-zA-Z]{2,4})$/,
                    message:'Please enter a valid email address'
                    },
                }
                },
                password: {
                    message: 'Error password',
                    validators: {
                        notEmpty: {
                            message: 'The password cannot be empty'
                        },
                        regexp: {
                            regexp: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,21}$/ ,
                            message:'Enter a combination of letters and numbers between 5 and 21'
                        }
                    }
                },
            },
        });
        //登录表单提交
        $('#loginBtn').on('click',function(e){
            e.preventDefault();
            //定义一个校验器
            var bootstrapValidator = $("#loginForm").data('bootstrapValidator');
            //执行校验
            bootstrapValidator.validate();
            //判断校验结果
            if(bootstrapValidator.isValid()){
                console.log('登录表单校验成功');
                //校验成功,可以ajax提交表单到服务器
                var email=$("#email").val().trim();  //得到名称的值
                var password=$("#password").val().trim();  //得到名称的值
                $.ajax({   
                    type:'post',
                    data:{
                        "email":email,
                        "password":password
                    },
                    dataType:'json', 
                    url: "/login",
                    success: function(data) { 
                        if(data.status==2){
                            toastr.error(data.errMsg);
                        }else{
                            location.href = getParam();
                        }
                    },
                    error:function(data){
                        //提交失败
                    }
                });
            }
        })
        function closeLoginModal(){
            $("#email").val('');  
            $("#password").val(''); 
            $('#loginForm').data("bootstrapValidator").resetForm();
        }
        // 关闭登录表单
        $('#loginModal').on('hidden.bs.modal', function () {
            closeLoginModal()
        })

        //个人信息切换
        $('.dropIcon').click(function(){
            $('.personal-box ul.userinfo').toggle();
            $(this).toggleClass('glyphicon-triangle-top');
        })
        $('.avatar').click(function(){
            $('.personal-box ul.userinfo').toggle();
            $('.dropIcon').toggleClass('glyphicon-triangle-top');
        })

        //注册表单校验

        $("#regForm").bootstrapValidator({
            enabled: true,
            // message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                //普通字段不为空校验
                email: {
                    validators: {
                        notEmpty: {
                            message: 'The email address cannot be empty'
                        },
                        regexp: {
                            regexp: /^([\w-.!#$%&'*-+=/?^_{|}~]+)@((?:\w+\.)+)(?:[a-zA-Z]{2,4})$/,
                            message:'Please enter a valid email address'
                        },
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: 'The password cannot be empty'
                        },
                        regexp: {
                            regexp: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,21}$/ ,
                            message:'Enter a combination of letters and numbers between 5 and 21'
                        },
                        identical: {
                            field: 'confirmPassword',
                            message: 'The password and its confirm are not the same'
                        }
                    }
                },
                confirmPassword: {
                    validators: {
                        notEmpty: {
                            message: 'The password cannot be empty'
                        },
                        regexp: {
                            regexp: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,21}$/ ,
                            message:'Enter a combination of letters and numbers between 5 and 21'
                        },
                        identical: {
                            field: 'password',
                            message: 'Verify that the password is not the same as the password'
                        }
                    },
                },
                graphCode: {
                    validators: {
                        notEmpty: {
                            message: 'The graphic code cannot be empty'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9]{4}$/ ,
                            message:'Enter valid graphic verification code'
                        }
                    }
                },
                emailcode: {
                    message: 'Error password',
                    validators: {
                        notEmpty: {
                            message: 'The email code cannot be empty'
                        },
                        regexp: {
                            regexp: /^\d{6}$/ ,
                            message:'Enter six digits of mailbox verification code'
                        },
                    }
                }
            },
        })
-
        
        //注册表单提交
        $('#regBtn').on('click',function(e){
            e.preventDefault();
            //定义一个校验器
            $('#regForm').data("bootstrapValidator").resetForm();
            var bootstrapValidator = $("#regForm").data('bootstrapValidator');
             //手动触发验证
            bootstrapValidator.validate();
            //判断校验结果
            if(bootstrapValidator.isValid()){
                var email=$("#regEmail").val().trim();  //得到名称的值
                var password=$("#regPwd").val().trim(); 
                var confirmPwd=$("#confirmRegPwd").val().trim(); 
                var graphCode=$("#regGraphCode").val().trim(); 
                var emailcode=$("#regEmailcode").val().trim(); 
                $.ajax({   
                    type:'post',
                    data:{
                        "email":email,
                        "password":password,
                        "graphCode":graphCode,
                        "emailcode":emailcode,
                        "rePwd":confirmPwd
                    },
                    dataType:'json', 
                    url: "/reg",
                    success: function(data) { 
                        if(data.status==1){
                            $('#regModal').modal('hide');
                            closeRegModal();
                            toastr.success('registered successfully');
                        }else if(data.status==3){
                            getCode();
                            toastr.error(data.errMsg);
                            $("input[name='graphCode']").val("").change();
                            $('#regForm').data("bootstrapValidator").resetForm();
                            bootstrapValidator.validate();
                        }else{
                            toastr.error(data.errMsg);
                        }
                    },
                    error:function(data){
                        //提交失败
                    }
                });
            }
        })
        function closeRegModal(){
            $("#regEmail").val('');  
            $("#regPwd").val(''); 
            $("#confirmRegPwd").val(''); 
            $("#regGraphCode").val(''); 
            $("#regEmailcode").val(''); 
            $('#regForm').data("bootstrapValidator").resetForm();
        }
        // 关闭注册表单
        $('#regModal').on('hidden.bs.modal', function () {
            //清空表单
            isRecursion=false;
            isClick=true;
            countdown = 60; 
            $(".sendCode").text('send');
            closeRegModal()
        })
        function closeFgtModal(){
            $("#fgtPwd").val('');  
            $("#fgtRePwd").val(''); 
            $("#fgtEmail").val(''); 
            $("#fgtEmailcode").val(''); 
            $('#fgtModal').data("bootstrapValidator").resetForm();
        }
        // 关闭忘记密码表单
        $('#fgtModal').on('hidden.bs.modal', function () {
            //清空表单
            isRecursion=false;
            isClick=true;
            countdown = 60; 
            $(".sendCode").text('send');
            closeFgtModal()
        })



        //忘记密码表单校验
        $("#fgtModal").bootstrapValidator({
            enabled: true,
            // message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                //普通字段不为空校验
                email: {
                    validators: {
                    notEmpty: {
                        message: 'The email address cannot be empty'
                    },
                    regexp: {
                        regexp: /^([\w-.!#$%&'*-+=/?^_{|}~]+)@((?:\w+\.)+)(?:[a-zA-Z]{2,4})$/,
                        message:'Please enter a valid email address'
                    },
                    }
                },
                emailcode: {
                    message: 'Error email code',
                    validators: {
                        notEmpty: {
                        message: 'The email code cannot be empty'
                        },
                        regexp: {
                        regexp: /^\d{6}$/ ,
                        message:'Enter six digits of mailbox verification code'
                        },
                    }
                },
                fgtPassword: {
                    validators: {
                        notEmpty: {
                            message: 'The password cannot be empty'
                        },
                        regexp: {
                            regexp: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,21}$/ ,
                            message:'Enter a combination of letters and numbers between 5 and 21'
                        },
                        identical: {
                            field: 'rePwd',
                            message: 'The password and its confirm are not the same'
                        }
                    }
                },
                rePwd: {
                    validators: {
                        notEmpty: {
                            message: 'The re-password cannot be empty'
                        },
                        regexp: {
                            regexp: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,21}$/ ,
                            message:'Enter a combination of letters and numbers between 5 and 21'
                        },
                        identical: {
                            field: 'fgtPassword',
                            message: 'Verify that the password is not the same as the password'
                        }
                    }
                }
            },
        });
        //忘记密码表单提交
        $('#fgtBtn').on('click',function(e){
            e.preventDefault();
            //定义一个校验器
            var bootstrapValidator = $("#fgtModal").data('bootstrapValidator');
            //执行校验
            bootstrapValidator.validate();
            //判断校验结果
            if(bootstrapValidator.isValid()){
                console.log('表单校验成功');
                //校验成功,可以ajax提交表单到服务器
                var password=$("#fgtPwd").val().trim(); 
                var rePwd=$("#fgtRePwd").val().trim(); 
                var email=$("#fgtEmail").val().trim();  
                var emailCode=$("#fgtEmailcode").val().trim();  
                $.ajax({   
                type:'post',
                data:{
                    "password":password,
                    "email":email,
                    "emailcode":emailCode,
                    "rePwd":rePwd
                },
                dataType:'json', 
                url: "/forgot",
                success: function(data) { 
                    if(data.status==1){
                        $('#fgtModal').modal('hide');
                        closeFgtModal();
                        toastr.success('Password changed successfully');
                    }else{
                        toastr.error(data.errMsg)
                    }
                },
                error:function(data){
                    //提交失败
                }
                });
            }else{
                //校验失败
            }
        })
        
        // 更改密码表单校验
        $("#chgePwdForm").bootstrapValidator({
            enabled: true,
            // message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                //普通字段不为空校验
                email: {
                    validators: {
                        notEmpty: {
                            message: 'The email address cannot be empty'
                        },
                        regexp: {
                            regexp: /^([\w-.!#$%&'*-+=/?^_{|}~]+)@((?:\w+\.)+)(?:[a-zA-Z]{2,4})$/,
                            message:'Please enter a valid email address'
                        },
                    }
                },
                chgPassword: {
                    validators: {
                        notEmpty: {
                        message: 'The password cannot be empty'
                        },
                        regexp: {
                            regexp: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,21}$/ ,
                            message:'Enter a combination of letters and numbers between 5 and 21'
                        },
                    }
                },
                chgNewPwd: {
                    validators: {
                        notEmpty: {
                            message: 'The new password cannot be empty'
                        },
                        regexp: {
                            regexp: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,21}$/ ,
                            message:'Enter a combination of letters and numbers between 5 and 21'
                        },
                        different: { 
                            field: 'chgPassword', 
                            message: 'The new password cannot be the same as the old password' 
                        },
                        identical: {
                            field: 'chgNewPwd',
                            message: 'The re-password cannot be empty'
                        }
                    }
                },
                chgRePwd: {
                    validators: {
                        notEmpty: {
                            message: 'Verify that the password is not the same as the password'
                        },
                        regexp: {
                            regexp: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,21}$/ ,
                            message:'Enter a combination of letters and numbers between 5 and 21'
                        },
                        identical: {
                            field: 'chgNewPwd',
                            message: 'The password and its confirm are not the same'
                        }
                    }
                },
            },
        });
        // 更改密码表单提交
        $('#changeBtn').on('click',function(e){
            e.preventDefault();
            //定义一个校验器
            var bootstrapValidator = $("#chgePwdForm").data('bootstrapValidator');
            //执行校验
            bootstrapValidator.validate();
            //判断校验结果
            if(bootstrapValidator.isValid()){
                var email=$("#chgEmail").val().trim();  //得到名称的值
                var password=$("#chgOldPwd").val().trim(); 
                var newPwd=$("#chgNewPwd").val().trim(); 
                var rePwd=$("#chgRePwd").val().trim(); 
                $.ajax({   
                    type:'post',
                    data:{
                        "email":email,
                        "oldPwd":password,
                        "newPwd":newPwd,
                        "rePwd":rePwd
                    },
                    dataType:'json', 
                    url: "/change",
                    success: function(data) { 
                        if(data.status==1){
                            $('#changeModal').modal('hide');
                            closeChangeModal();
                            toastr.success('Password changed successfully');
                        }else{
                            toastr.error(data.errMsg)
                        }
                    },
                    error:function(data){
                        //提交失败
                    }
                });
            }
        })
        function closeChangeModal(){
            $("#chgEmail").val('');  
            $("#chgOldPwd").val(''); 
            $("#chgNewPwd").val(''); 
            $("#chgRePwd").val(''); 
            $('#chgePwdForm').data("bootstrapValidator").resetForm();
        }

        //点击登录页面的忘记和立即注册弹框切换
        $('.forget-box .forgetPwd').on('click',function(){
            $('#loginModal').modal('toggle');
        })

        $('.forget-box .register').on('click',function(){
            $('#loginModal').modal('toggle');
        })
        // 点击注册btn
        $('#register-btn,#loginModal-btn').click(function(){
            getCode(function(){
                $('#regModal').modal('show');
            })
        })
        // 点击登录btn
        $('#login-btn').click(function(){
            $('#loginModal').modal('show');
        })
        // 忘记密码btn
        $('#forgetPwdModal-btn').click(function(){
            $('#fgtModal').modal('show');
        })
        // 修改密码btn
        $('#change-btn').click(function(){
            $('#changeModal').modal('show');
            $('.personal-box ul.userinfo').hide();
            $('.dropIcon').toggleClass('glyphicon-triangle-top');
        })
        // 刷新图形验证码
        $('.imgCode').click(function(){
            getCode();
        })
        // 退出登录
        $('#logout').click(function(){
            location.href='/logout'
        })

        var isLogin = "<%= isLogin %>"
        console.log(isLogin)
        if(isLogin=='0'){
            $('#loginModal').modal('show');
        }
        $('#logo').click(function(){
            location.href='/'
        })
    })
   
</script>